<template>
  <div class="main-body">
    <div class="article_search">
      <el-form :inline="true" :model="filters">
        <el-form-item label="作者">
          <el-input v-model="filters.author_name" />
        </el-form-item>
        <el-form-item>
          <el-select style="width: 200px;" v-model="select_value" placeholder="选择tag">
            <el-option v-for="item in article_tags" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchArticle">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="pageDataInfo.tableData" border style="width: 100%">
      <el-table-column prop="title" label="title" :showOverflowTooltip="true" />
      <el-table-column prop="description" label="description" :showOverflowTooltip="true" />
      <el-table-column prop="createdAt" label="createdAt" />
      <el-table-column prop="author.username" label="author_name" />
      <el-table-column prop="tagList" label="标签">
        <template #default="scope">
          <el-tag v-for="(item,index) in scope.row.tagList" :key="index">
            {{ item }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-model:currentPage="pageDataInfo.pageIndex" v-model:page-size="pageDataInfo.pageSize"
      :page-sizes="[5, 10, 15, 20]" layout="total, sizes, prev, pager, next" :total="pageDataInfo.total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<script lang="ts" setup>
import { Article, ArticleSearchParam } from '@/types'
import { ref } from 'vue';
import axios from "@/utils/request"

const select_value = ref<string>('')
const article_tags = ref<string[]>([])


interface PageDataInfo {
  tableData: Article[];
  pageSize: number;
  pageIndex: number;
  total: number;
}

const pageDataInfo = ref<PageDataInfo>({
  tableData: [],
  pageIndex: 1,
  pageSize: 10,
  total: 0
})

const filters = ref({
  author_name: ''
})

const getTags = () => {
  axios.get('/tags').then(res => {
    article_tags.value = res.data.tags
  })
}

const searchArticle = () => {
  pageDataInfo.value.pageIndex = 1
  pageDataInfo.value.pageSize = 10
  get_articles(pageDataInfo.value.pageIndex, pageDataInfo.value.pageSize)
}

const handleSizeChange = (val: number) => {
  pageDataInfo.value.pageSize = val
  get_articles(pageDataInfo.value.pageIndex, pageDataInfo.value.pageSize)
}

const handleCurrentChange = (val: number) => {
  pageDataInfo.value.pageIndex = val
  get_articles(pageDataInfo.value.pageIndex, pageDataInfo.value.pageSize)
}
const get_articles = (pageIndex: number, pageSize: number) => {
  const article_search_param: ArticleSearchParam = {
    limit: pageSize,
    offset: (pageIndex - 1) * pageSize
  }

  if (filters.value.author_name !== '') {
    article_search_param.author = filters.value.author_name
  }

  if (select_value.value !== '') {
    article_search_param.tag = select_value.value
  }


  axios.get('/articles', { params: article_search_param }).then(res => {
    pageDataInfo.value.tableData = res.data.articles
    pageDataInfo.value.total = res.data.articlesCount
  })
}
getTags()
get_articles(pageDataInfo.value.pageIndex, pageDataInfo.value.pageSize)
</script>
<style scoped>
.main-body {
  padding: 16px 16px 30px;
  overflow: auto;
  height: 100%;
  box-sizing: border-box;
}
</style>